edge/react-fc-component-definition & edge/react-render-function-definition

Two complementary ESLint rules enforcing consistent React component and render function typing conventions.

Rule Details

edge/react-fc-component-definition

Targets PascalCase-named arrow functions that return JSX types. Components should use React.FC<Props> instead of explicit return types.

edge/react-render-function-definition

Targets camelCase functions starting with render (e.g., renderItem, renderHeader). Render helpers should use React.ReactElement instead of ReactNode or JSX.Element.

Why These Rules?

For Components (React.FC<Props>):

1. Consistency - Uniform component signatures across the codebase
2. Implicit children - React.FC handles the children prop type automatically
3. Cleaner syntax - Props type is declared once on the variable, not repeated
4. Return type inference - The return type is inferred from React.FC, reducing verbosity

For Render Helpers (React.ReactElement):

1. Type precision - ReactNode is too broad (includes strings, numbers, arrays)
2. Consistency - JSX.Element should be ReactElement for uniformity
3. Explicit unions - Nullable returns should use ReactElement | null

Examples

Components (PascalCase)

Incorrect

// Explicit return type on arrow function
export const MyComponent = (props: Props): React.ReactElement => {
  return <View>{props.title}</View>
}

// With nullable return
export const CountdownTile = (props: Props): React.ReactElement | null => {
  if (!props.show) return null
  return <View>{props.value}</View>
}

// Using JSX.Element
const Button = (props: ButtonProps): JSX.Element => {
  return <TouchableOpacity>{props.label}</TouchableOpacity>
}

Correct

// Type annotation on the variable
export const MyComponent: React.FC<Props> = props => {
  return <View>{props.title}</View>
}

// Nullable returns work with React.FC
export const CountdownTile: React.FC<Props> = props => {
  if (!props.show) return null
  return <View>{props.value}</View>
}

// Destructured props
const Button: React.FC<ButtonProps> = ({ label, onPress }) => {
  return <TouchableOpacity onPress={onPress}>{label}</TouchableOpacity>
}

Render Helpers (camelCase)

Incorrect

// ReactNode is too broad
const renderItem = (item: Item): React.ReactNode => {
  return <ItemRow item={item} />
}

// JSX.Element should be ReactElement
const renderHeader = (): JSX.Element => {
  return <Header title="My List" />
}

Correct

// Explicit ReactElement return type
const renderItem = (item: Item): React.ReactElement => {
  return <ItemRow item={item} />
}

// Nullable returns use explicit union
const renderBadge = (show: boolean): React.ReactElement | null => {
  if (!show) return null
  return <Badge />
}

// Wrap strings/arrays in fragments
const renderStatus = (loading: boolean): React.ReactElement => {
  if (loading) return <>Loading...</>
  return <StatusIcon />
}

Configuration

Both rules are enabled as warnings by default in the Edge ESLint configuration:

{
  rules: {
    'edge/react-fc-component-definition': 'warn',
    'edge/react-render-function-definition': 'warn'
  }
}

Related

• React TypeScript Cheatsheet - Function Components

CHANGELOG

Does this branch warrant an entry to the CHANGELOG?

• Yes
• No

Dependencies

Requirements

If you have made any visual changes to the GUI. Make sure you have:

• Tested on iOS device
• Tested on Android device
• Tested on small-screen device (iPod Touch)
• Tested on large-screen device (tablet)